<template>
    <div class="shell" @mouseenter="handleMouseEnter" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
       <video loop muted autoplay src="../assets/video/top.mp4" class="video"
       style="height: 100%;transform: translate(36px,-50px);"></video>
    </div>
</template>
<script setup>
import { ref } from 'vue';

const videoRef = ref(null);
let x = 0;

const handleMouseEnter = (e) => {
  x = e.clientX;
  if (videoRef.value) {
    videoRef.value.style.transition = 'none';
  }
};

const handleMouseMove = (e) => {
  const _x = e.clientX;
  const disx = _x - x;
  const move = 36 - disx / -20;
  if (videoRef.value) {
    videoRef.value.style.transform = `translate(${move}px,-8px)`;
  }
};

const handleMouseLeave = (e) => {
  if (videoRef.value) {
    videoRef.value.style.transition = 'transform 0.3s';
    videoRef.value.style.transform = 'translate(36px,-8px)';
  }
};
        // const shell = document.querySelector(".shell")
        // const video = document.querySelector(".video")
        // shell.addEventListener('mouseenter', function (e) {
        //     this.x = e.clientX
        //     video.style.transition = 'none'
        // })
        // shell.addEventListener('mousemove', function (e) {
        //     this._x = e.clientX
        //     const disx = this._x - this.x
        //     const move = 36 - disx / -20
        //     video.style.transform = `translate(${move}px,-8px)`
        // })
        // shell.addEventListener('mouseleave', function (e) {
        //     // video.style.transition = .3 +'s'
        //     video.style.transition = 'transform 0.3s'
        //     video.style.transform = 'translate(36px,-8px)'
        // })

</script>
<style scoped>
   * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 100%;
            display: flex;
            justify-content: center;
            overflow: hidden;
           background-color: aliceblue;
           margin-bottom: -50px;
        }

        .shell {
            width: 100%;
            height: 162px;
            display: flex;
            justify-content: center;
        }
</style>